<template>
  <div class="h100">
    <div class="main">
      <div class="login-body">
        <div class="pic"></div>
        <div class="form">
          <h1>齐都体育城预约管理系统</h1>
          <el-form style="padding: 10px" :model="loginFormModel" :rules="rules" ref="loginFormRef">
            <el-row>
              <el-col :span="24">
                <el-form-item label="用户名:" prop="username" :label-width="80">
                  <el-input v-model="loginFormModel.username" placeholder="请输入用户名" style="height: 40px;"
                            autocomplete="off"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="密码:" prop="password" :label-width="80">
                  <el-input type="password" v-model="loginFormModel.password" show-password placeholder="请输入密码"
                            style="height: 40px" autocomplete="off"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="验证码:" prop="captcha" :label-width="80">
                  <el-input placeholder="请输入验证码" v-model="loginFormModel.captcha" maxlength="4" minLength="4"
                            style="height: 40px;" autocomplete="off"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <img class="captcha" :src="captchaUrl" style="height: 40px;" @click="refresh" alt="验证码">
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-button type="primary" class="login-btn" @click="submitLogin">登&nbsp;&nbsp;录</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="mask"></div>
      <div class="copyright">
        <h2>&copy;版权所有 临淄体育局</h2>
      </div>
    </div>
  </div>
</template>

<style>
.h100 {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

<style scoped>
.main {
  height: 100%;
  min-height: 100vh;
  background: url("@/assets/login_bg.jpg") no-repeat center center/cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main > .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(245, 247, 250, 0.6));
}

.login-body {
  width: 700px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  z-index: 1000;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.login-body:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.login-body > .pic {
  width: 180px;
  background: url("@/assets/login_side.jpg") no-repeat center center/cover;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.login-body:hover > .pic {
  opacity: 1;
}

.login-body > .form {
  flex-grow: 1;
  padding: 30px 25px;
}

.login-body > .form > h1 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 25px;
  font-weight: 600;
  letter-spacing: 1px;
}

.copyright {
  position: fixed;
  bottom: 30px;
  color: #666;
  font-size: 13px;
  text-align: center;
  width: 100%;
}

.login-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(120deg, #4A90E2, #50C8C6);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.login-btn:active {
  transform: translateY(0);
}

.captcha {
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.captcha:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 12px rgba(74, 144, 226, 0.15);
}

:deep(.el-input__wrapper:focus) {
  box-shadow: 0 2px 12px rgba(74, 144, 226, 0.25);
}

:deep(.el-radio-group) {
  display: flex;
  justify-content: center;
  margin: 15px 0 20px;
}

:deep(.el-radio-button__inner) {
  padding: 8px 20px;
  border-radius: 6px !important;
  border: 1px solid #ebeef5 !important;
  background-color: #f5f7fa !important;
  color: #606266 !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

:deep(.el-radio-button.is-active .el-radio-button__inner) {
  background: linear-gradient(120deg, #4A90E2, #50C8C6) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2) !important;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #555;
}
</style>

<script setup>
import {ref, reactive, toRaw} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import api from "@/util/api.js";
import {saveJwt} from "@/api/jwt.js";

//由于此验证规则不会对数据进行更改，所以没有使用ref函数
const rules = {
  username: [
    {
      required: true,
      message: "用户名为空"
    }
  ],
  password: [
    {
      required: true,
      message: "密码为空"
    }
  ],
  captcha: [
    {
      required: true,
      message: "验证码为空"
    },
    {
      min: 4,
      max: 4,
      message: "验证码必须为4位"
    }
  ]
};

//验证码地址
//浏览器自动发送get请求到后端(img标签的原生行为)
const captchaUrl = ref("/api/users/captcha");

//刷新验证码
function refresh() {
  //此地址会被反向代理成http://localhost:8080的地址
  captchaUrl.value = "/api/users/captcha?id=" + Math.random();
}

//登录数据模型
const loginFormModel = reactive({
  username: "",
  password: "",
  captcha: ""
});

//只能在setup中使用
const router = useRouter();

//表单实例引用
let loginFormRef = ref();

//点击登录按钮触发
function submitLogin() {
  loginFormRef.value.validate(async valid => {
    if (valid) {
      let model = toRaw(loginFormModel);
      //console.log(model);
      let resp = await api({
        url: "/users/login",
        method: "post",
        data: model,
        params: {
          type: "admin"
        }
      })
      //console.log(resp);
      if (resp.success) {
        //保存jwt
        saveJwt(resp.data);
        ElMessage.success("登录成功");
        //路由跳转到主页main
        await router.push("/admin/main");
      } else {
        ElMessage.error(resp.msg);
        refresh();
      }
    } else {
      ElMessage.error("输入不合法");
      refresh();
    }
  });
}
</script>